<template>
  <SubPanel
          :title="$t('public.contactPlan')"
          ref="subPanel"
          class="webchat-info-contact-sub-panel"
          @subPanelOpen="$emit('subPanelOpen')"
          @subPanelClose="$emit('subPanelClose')">
    <ContactPlan
            :cid = "customer._id"
            :refresh = "refresh"
            :refreshBusRight = "refreshWebchatRight"/>
  </SubPanel>
</template>
<script>
  import bus from 'src/store/eventBus'
  import SubPanel from './SubPanel.vue'
  import ContactPlan from '../webchat-contact-plan/index.vue'
  export default {
    name: 'contactPlanSubPanel',
    data () {
      return {
        refresh: 'plan',
        refreshWebchatRight: 0,
        label: this.$t('public.contactPlan')
      }
    },
    components: {
      SubPanel,
      ContactPlan
    },
    watch: {
      refreshNum (cur, old) {
        this.refreshWebchatRight = cur
      },
      customerId () {
        this.refreshWebchatRight = Math.random()
      }
    },
    props: {
      customer: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    computed: {
      customerId () {
        return this.customer._id
      },
      refreshNum () {
        return this.$store.state.webchat.current.refreshWebchatRight || 0
      }
    },
    mounted () {
      bus.$on('refreshContactPlanSubPanel', (msg) => {
        this.refreshWebchatRight = Math.random()
      })
    },
    beforeDestroy () {
      bus.$off('refreshContactPlanSubPanel')
    },
    methods: {
      open () {
        this.$refs.subPanel.open()
      },
      close () {
        this.$refs.subPanel.close()
      }
    }
  }

</script>
<style lang="stylus" scoped>

</style>
